<!DOCTYPE html><head><meta charset="utf-8"><style>.container {
    width: 80%;
    margin: auto;
}

form {
    border: 1px solid grey;
    padding: 20px;
    width: 50%;
}

img {
    max-width: 95%;
}

.center {
    display: table;
    margin: auto;
}

.col-lg-1 {
    width: 10%;
    float: left;
}
.col-lg-6 {
    width: 50%;
    float: left;
}

.row {
    clear: both;
}

.element01 {
    width: 100%;
}

.element02 {
    color: #00f;
    background-color: #ddd;
}

.element03 {
    color: #00f;
}

.element04 {
    background-color: #ddd;
}

.element05 {
    border: 2px dotted #00f;
}

.element06 {
    border: none;
}

.element07 {
    font-family: "Courier New", Courier;
}

.element08 {
    width: 4em;
    height: 4em;
}

.element09 {
    font-size: 0.5em;
}

.element10 {
    font-weight: bold;
}

.element11 {
    padding: 1em;
}

.element12 {
    margin: 1em;
}

.element13 {
    text-align: right;
}

.element14 {
    line-height: 2em;
}

select {
    width: 50%;
    height: 34px;
}</style></head><body><div class="container"><div class="row"><div class="col-lg-1"><button data="label" class="btn selectEle">Label</button></div><div class="col-lg-1"><button data="input" class="btn selectEle">Input</button></div><div class="col-lg-1"><button data="button" class="btn selectEle">Button</button></div><div class="col-lg-1"><button data="checkbox" class="btn selectEle">Checkbox</button></div><div class="col-lg-1"><button data="radio" class="btn selectEle">Radio</button></div><div class="col-lg-1"><button data="select" class="btn selectEle">Select</button></div></div><div class="row"><form class="center"><h2>Button几种样式集合。</h2><h3>当前浏览器:</h3><button type="submit" class="element01">element01 : width:100%;</button><br><button type="submit" class="element02">element02 : color:blue;background-color: #ddd;</button><br><button type="submit" class="element03">element03 : color:#00f;</button><br><button type="submit" class="element04">element04 : background-color: #ddd;</button><br><button type="submit" class="element05">element05 : border: 2px dotted #00f;</button><br><button type="submit" class="element06">element06 : border: none;</button><br><button type="submit" class="element07">element07 : font-family: "Courier New", Courier;</button><br><button type="submit" class="element08">width:4em; height:4em;</button><br><button type="submit" class="element09">element09 : font-size: 0.5em;</button><br><button type="submit" class="element10">element10 : font-weight: bold;</button><br><button type="submit" class="element11">element11 : padding: 1em;</button><br><button type="submit" class="element12">element12 : margin: 1em;</button><br><button type="submit" class="element13">element13 : text-align: right;</button><br><button type="submit" class="element14">element14 : line-height: 2em;</button></form></div><br><br><br><div class="row"><div class="col-lg-6"><div class="dropdown-left"><select><option value="chrome40">chrome 40</option><option value="firefox36">firefox 36</option><option value="opera28">opera 28</option><option value="ie7">ie 7</option><option value="ie8">ie 8</option><option value="ie9">ie 9</option><option value="ie10">ie 10</option><option value="ie11">ie 11</option></select><div class="content"><p>chrome 40:</p><img src="img/button/chrome40.png"></div></div></div><div class="col-lg-6 center"><div class="dropdown-right"><select><option value="chrome40">chrome 40</option><option value="firefox36">firefox 36</option><option value="opera28">opera 28</option><option value="ie7">ie 7</option><option value="ie8">ie 8</option><option value="ie9">ie 9</option><option value="ie10">ie 10</option><option value="ie11">ie 11</option></select><div class="content"><p>chrome 40:</p><img src="img/button/chrome40.png"></div></div></div></div></div><script src="../bower_components/jquery/dist/jquery.js"></script><script>$('select').on('change', function () {
    var name = $(this).find("option:selected").val();
    var $content = $('.content', $(this).parent())
    $('p', $content).html(name);
    $('img', $content).attr('src', 'img/button/' + name + '.png');
})

$('.selectEle').on('click', function () {
    var name = $(this).attr('data');
    location.href = location.href.substring(0, location.href.lastIndexOf("/") + 1) + name + ".html";
})</script></body>